<template>
    <div class="container" ref="xe2Container"></div>
    <div class="header">
        <BuildToggle></BuildToggle>
        <BuildHighLight></BuildHighLight>
        <BuildFloorShow></BuildFloorShow>
        <PointCreate></PointCreate>
        <HumanAi></HumanAi>
        <PathRecord></PathRecord>
        <InsideAlarm></InsideAlarm>
        <InsideHeight></InsideHeight>
        <BuildEffect></BuildEffect>
        <PolygonFence></PolygonFence>
        <PickFlyToFloor></PickFlyToFloor>
        <Shadow></Shadow>
        <BuildPoi></BuildPoi>
        <CameraPoi></CameraPoi>
    </div>
</template>

<script setup lang="ts">
import BuildToggle from "@/components/BuildToggle.vue"
import BuildHighLight from "@/components/BuildHighLight.vue"
import BuildFloorShow from "./components/BuildFloorShow.vue";
import PointCreate from "./components/PointCreate.vue"
import HumanAi from "./components/HumanAi.vue";
import PathRecord from "./components/PathRecord.vue";
import InsideHeight from "./components/InsideHeight.vue";
import InsideAlarm from "./components/InsideAlarm.vue";
import BuildEffect from "./components/BuildEffect.vue";
import PolygonFence from "./components/PolygonFence.vue";
import PickFlyToFloor from "./components/PickFlyToFloor.vue";
import Shadow from "@/components/Shadow.vue"
import BuildPoi from "./components/BuildPoi.vue";
import CameraPoi from "./components/CameraPoi.vue"
import { onMounted, ref } from "vue";
import { getMyProjectManager } from "@/getMyProjectManager";



const xe2Container = ref(null)
const myProjectManager = getMyProjectManager()
// 监听视口创建事件
myProjectManager.viewerCreatedEvent.don((viewer) => {
    console.log("视口创建", viewer)
})


onMounted(() => {
    if (!xe2Container.value) {
        console.error(`!xe2Container.value`)
        return
    }

    // 自定义监听事件
    myProjectManager.viewerCreatedEvent.don((viewer) => {
        viewer.clickEvent.don((e) => {
            // pick事件发送
            viewer.pick(e.screenPosition as [number, number], 'globelPick', true)
        })
    })
    const viewer = myProjectManager.createUEViewer({
        "domid": xe2Container.value,
        "uri": "http://localhost:9007/",
        "app": "dianliju",
    });
    viewer.setCurrentTime("2024/09/09 12:34:56")
})

</script>
<style>
html,
body,
#app,
.container {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

.header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 20px;
    flex-wrap: wrap;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 80px;
}

.header>div {
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>
